<template>
  <view class="exhibition-detail">
    <!-- 自定义导航栏 -->
    <custom-navbar
      :title="'展品详情'"
      :background-color="'#FFFFFF'"
	  :showBack="true"
    ></custom-navbar>

    <!-- 展品图片 -->
      <image
	    class="exhibition-image"
        :src="exhibitionInfo.exhibitImage"
        :height="400"
		v-if="exhibitionInfo"
      ></image>

    <!-- 展品信息 -->
    <view class="exhibition-info">
      <view class="title" v-if="exhibitionInfo">{{ exhibitionInfo.exhibitName }}</view>
      <view class="desc"></view>
      <view class="detail-content">
        <view class="section">
          <view class="section-title">展品介绍</view>
          <view class="section-content" v-if="exhibitionInfo">{{ exhibitionInfo.exhibitDesc }}</view>
        </view>
        <view class="section" v-if="exhibitionInfo">
          <view class="section-title">展品特点</view>
          <view class="section-content">
            <view
              v-for="(item, index) in exhibitionInfo.features"
              :key="index"
              class="feature-item"
            >
              <uni-icons
                type="checkmarkempty"
                size="16"
                color="#5a8dee"
              ></uni-icons>
              <text>{{ item }}</text>
            </view>
          </view>
        </view>
        <view class="section" v-if="exhibitionInfo">
          <view class="section-title">参观须知</view>
          <view class="section-content">
            <view
              v-for="(item, index) in exhibitionInfo.notices"
              :key="index"
              class="notice-item"
            >
              <uni-icons type="info" size="16" color="#ff9800"></uni-icons>
              <text>{{ item }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <view class="action-btn" @click="toggleFavorite">
        <uni-icons
          :type="isFavorite ? 'star-filled' : 'star'"
          size="24"
          :color="isFavorite ? '#ff9800' : '#999'"
        ></uni-icons>
        <text>{{ isFavorite ? "已收藏" : "收藏" }}</text>
      </view>
      <view class="action-btn" @click="share">
        <uni-icons type="redo" size="24" color="#999"></uni-icons>
        <text>分享</text>
      </view>
      <view class="primary-btn" @click="bookVisit">预约参观</view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import CustomNavbar from "@/components/custom-navbar/index.vue";
import { onLoad } from "@dcloudio/uni-app"

// 展品ID
const exhibitionId = ref("");

// 展品信息
const exhibitionInfo = ref(uni.getStorageSync('exhibitData'));

// 是否已收藏
const isFavorite = ref(false);

// 获取展品ID
onMounted(() => {
  const query = uni.getLaunchOptionsSync().query || {};
  if (query.id) {
    exhibitionId.value = query.id;
    // 根据ID加载展品信息
    loadExhibitionInfo();
  }
});

// 加载展品信息
const loadExhibitionInfo = () => {
  // 模拟加载数据
  console.log("加载展品ID:", exhibitionId.value);
};

// 切换收藏状态
const toggleFavorite = () => {
  isFavorite.value = !isFavorite.value;
  uni.showToast({
    title: isFavorite.value ? "收藏成功" : "已取消收藏",
    icon: "success",
  });
};

// 分享
const share = () => {
  uni.showShareMenu({
    withShareTicket: true,
    menus: ["shareAppMessage", "shareTimeline"],
  });
};

// 预约参观
const bookVisit = () => {
  uni.navigateTo({
    url: "/pages/booking/index",
	fail() {
	  uni.switchTab({
	  	url: "/pages/booking/index",
	  })
	}
  });
};

onLoad((options) => {
  if (options.data) {
    const item = JSON.parse(decodeURIComponent(options.data));
    
	const tips = {
	  features: [
	    "完整结构展示",
	    "专业的医学知识讲解",
	    "互动式学习体验",
	  ],
	  notices: [
	    "请保持安静，不要触摸展品",
	    "禁止拍照和录像",
	    "需要专业讲解请提前预约",
	    "参观时间建议30-45分钟",
	  ],
	}
	exhibitionInfo.value = Object.assign(item, tips)
  }
})
</script>

<style lang="scss" scoped>
.exhibition-detail {
  min-height: 100vh;
  background-color: $uni-bg-color-grey;
  padding-bottom: 120rpx;
}

.exhibition-image {
  width: 100%;
  height: 400rpx;
  object-fit: cover;
}

.exhibition-info {
  background-color: $uni-bg-color;
  padding: $spacer-4;
  margin-top: -40rpx;
  border-radius: 40rpx 40rpx 0 0;
  position: relative;
  z-index: 1;
}

.title {
  font-size: $uni-font-size-xl;
  font-weight: 500;
  margin-bottom: $spacer-2;
}

.desc {
  font-size: $uni-font-size-base;
  color: $uni-text-color-grey;
  margin-bottom: $spacer-4;
}

.section {
  margin-bottom: $spacer-4;

  &:last-child {
    margin-bottom: 0;
  }
}

.section-title {
  font-size: $uni-font-size-lg;
  font-weight: 500;
  margin-bottom: $spacer-3;
}

.section-content {
  word-break: break-all;
  font-size: $uni-font-size-base;
  color: $uni-text-color;
  line-height: 1.6;
}

.feature-item,
.notice-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: $spacer-2;

  &:last-child {
    margin-bottom: 0;
  }

  text {
    flex: 1;
    margin-left: $spacer-2;
  }
}

.bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100rpx;
  background-color: $uni-bg-color;
  display: flex;
  align-items: center;
  padding: 0 $spacer-4;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: $spacer-4;

  text {
    font-size: $uni-font-size-sm;
    color: $uni-text-color-grey;
    margin-top: 4rpx;
  }
}

.primary-btn {
  flex: 1;
  height: 80rpx;
  background: $gradient-primary;
  color: $uni-text-color-inverse;
  font-size: $uni-font-size-lg;
  border-radius: $uni-border-radius-lg;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
